<template>
  <div class="emoji-chat">
    <el-input
      class="chatText"
      id="textarea"
      autofocus
      v-model="textarea"
      type="textarea"
      autosize
      :placeholder="placeholder"
      :maxlength="maxlength"
      :show-word-limit="wordLimit"
    ></el-input>
    <div class="chat-emoji">
      <el-popover
        :placement="placement"
        :width="width"
        :trigger="trigger"
        popper-class="emoji-popover"
      >
        <div class="emoji-list">
          <el-tabs v-model="activeName">
            <el-tab-pane label="默认表情" name="first">
              <a
                href="javascript:void(0);"
                @click="getEmoji(index)"
                v-for="(item,index) in faceList"
                :key="index"
                class="emoji-item"
              >{{item}}</a>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="iconfont icon-biaoqing-xue" slot="reference">表情</div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name:'Emoticons',
  props: {
    // 输入框默认文字
    placeholder: {
      type: String,
      default: "请输入评论内容"
    },
    // 传过来的表情库
    faceList: {
      type: Array
    },
    // 想要回显的值
    inputValue: {
      type: String
    },
    // 限制输入框的最大长度
    maxlength: {
      type: Number,
      default: 200
    },
    // 是否显示限制字数
    wordLimit: {
      type: Boolean,
      default: true
    },
    // 表情框的宽度
    width: {
      type: Number,
      default: 400
    },
    // 表情框显示位置
    placement: {
      type: String,
      default: "bottom"
    },
    // 表情框触发方式
    trigger: {
      type: String,
      default: "click"
    }
  },
  data() {
    return {
      textarea: "",
      activeName:'first'
    };
  },
  watch: {
    inputValue(newVal, oldVal) {
      this.textarea = newVal;
    },
    textarea(newVal, oldVal) {
      this.valueChange(newVal);
    }
  },
  methods: {
    // 获取用户点击之后的标签 ，存放到输入框内
    getEmoji(index) {
      var textElement = document.getElementById("textarea");
      this.changeSelectEmoji(this.faceList[index]);
      this.textarea = textElement.value; // 要同步data中的数据
      return;
    },
    changeSelectEmoji(str) {
      var textElement = document.getElementById("textarea");
      // 非IE浏览器
      if (window.getSelection) {
        textElement.setRangeText(str);
        textElement.selectionStart += str.length;
        textElement.focus();
      } else if (document.selection) {
        // IE浏览器
        textElement.focus();
        var sel = document.selection.createRange();
        sel.text = str;
      }
    },
    valueChange(e) {
      this.$emit("input", e);
    }
  }
};
</script>


<style lang="scss" scoped>
.emoji-chat {
  display: flex;
  .chatText {
    width: 100%;
  }
  .chat-emoji {
    padding: 0 10px;
    font-size: 25px;
    i {
      cursor: pointer;
      font-size: 20px;
    }
  }
}
.emoji-list {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}
.emoji-item {
  width: 10%;
  font-size: 20px;
  text-align: center;
}
/*包含以下四种的链接*/
.emoji-item {
  text-decoration: none;
}
/*正常的未被访问过的链接*/
.emoji-item:link {
  text-decoration: none;
}
/*已经访问过的链接*/
.emoji-item:visited {
  text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emoji-item:hover {
  text-decoration: none;
}
/* 正在点击的链接*/
.emoji-item:active {
  text-decoration: none;
}
</style>

